<template>
  <div class="verification1">
    <div class="logo-box">
      <img width="100%" src="../../../assets/images/login.logo.text.png" alt="logo" />
    </div>
    <div class="content-box">
      <p class="header">
        <span>信息验证</span>
        <button @click="refresh" class="refresh">重新校验</button>
      </p>
      <div class="content">
        <div class="table">
          <p class="item">
            <span class="title">姓名</span>
            <span class="text">{{info.name}}</span>
          </p>
          <p class="item">
            <span class="title">学号</span>
            <span class="text">{{info.studentId}}</span>
          </p>
          <p class="item">
            <span class="title">文件名称</span>
            <span class="text">{{info.fileName}}</span>
          </p>
          <p class="item">
            <span class="title">验证码</span>
            <span class="text">{{info.code}}</span>
          </p>
          <p class="item">
            <span class="title">申请时间</span>
            <span class="text">{{info.createTime}}</span>
          </p>
          <p class="item">
            <span class="title">查看文件</span>
            <span @click="showImg" class="text see">点击查看</span>
          </p>
        </div>
      </div>
    </div>
    <h2 class="info">此验证码有效！请核对文件内容是否与上述信息一致！</h2>
    <div class="pdf-box">
      <div class="item">
        <img width="100%" :src="info.pdfImageUrl" />
        <p class="link"></p>
      </div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
export default {
  name: "verification",
  components: {
    [ImagePreview.name]: ImagePreview
  },
  props: {
    info: {
      type: Object,
      value: {}
    }
  },
  methods: {
    showImg() {
      ImagePreview([this.info.pdfImageUrl]);
    },
    refresh() {
      this.$emit("refresh");
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../../../assets/styles/variable.scss';
.verification1 {
  padding-top: .426667rem /* 16/37.5 */;
  width: 90%;
  min-height: 100%;
  min-width: 9.333333rem /* 350/37.5 */;
  margin: 0 auto;
  .logo-box {
    width: 100%;
    margin: 0 auto .426667rem /* 16/37.5 */;
    text-align: center;
  }
  .content-box {
    width: 100%;
    margin: 0 auto;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(238, 238, 238, 1);
    box-shadow: 0 1px 8px 0 rgba(122, 122, 122, 0.29);
    border-radius: .106667rem /* 4/37.5 */;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 0 .266667rem /* 10/37.5 */;
      width: 100%;
      height: .853333rem /* 32/37.5 */;
      background: rgba(238, 238, 238, 1);
      font-size: .373333rem +$fontsize/* 14/37.5 */;
      color: #999999;
      .refresh {
        height: 100%;
        font-size: .373333rem +$fontsize/* 14/37.5 */;
        padding: .16rem /* 6/37.5 */ .426667rem /* 16/37.5 */;
        background-color: #2172ed;
        color: #fff;
        border-radius: .106667rem /* 4/37.5 */;
        border: none;
        outline: none;
        &:active {
          opacity: 0.8;
        }
      }
    }
    .content {
      box-sizing: border-box;
      width: 100%;
      padding: .266667rem /* 10/37.5 */;
      background-color: #fff;
      min-height: 5.386667rem /* 202/37.5 */;
      .table {
        width: 100%;
        border: 1px solid #8cacbb;
        border-radius: .106667rem /* 4/37.5 */;
        .item {
          display: flex;
          min-height: .8rem /* 30/37.5 */;
          line-height: .8rem /* 30/37.5 */;
          font-size: .346667rem+$fontsize /* 13/37.5 */;
          color: #222222;
          .title {
            box-sizing: border-box;
            width: 2.255733rem /* 84.59/37.5 */;
            flex: 0 0 2.255733rem /* 84.59/37.5 */;
            padding: 0 .32rem /* 12/37.5 */;
            text-align: right;
            background: #f2f2f2;
            border-right: 1px solid #8cacbb;
            border-bottom: 1px solid #8cacbb;
          }
          .text {
            flex: 1;
            padding: 0 .32rem /* 12/37.5 */;
            word-break: break-all;
            border-bottom: 1px solid #8cacbb;
            &.see {
              color: #2172ed;
              cursor: pointer;
            }
          }
          &:last-child .title,
          &:last-child .text {
            border-bottom: none;
          }
        }
      }
    }
  }
  .info {
    font-size: .346667rem +$fontsize/* 13/37.5 */;
    text-align: center;
    color: #ff3d3d;
    margin: .32rem /* 12/37.5 */ auto;
  }
  .pdf-box {
    .item {
      .link {
        width: 100%;
        height: 2px;
        margin: .266667rem /* 10/37.5 */ auto;
        background: rgba(242, 242, 242, 1);
      }
    }
  }
}
</style>
